<template>
  <div>
    <el-switch
      class="switch"
      v-model="isShow"
      active-color="#13ce66"
      inactive-color="#ff4949"
      :active-value="1"
      :inactive-value="0"
      active-text="显示"
      inactive-text="隐藏"
      @change="switchChange"
    >
    </el-switch>
  </div>
</template>

<script>
export default {
  props: ["isShow", "editId"],
  data() {
    return {};
  },

  methods: {
    switchChange(e) {
      let obj = {
        id: this.editId,
        is_show: this.isShow,
      };
      this.$emit("switchChange", obj);
    },
  },
};
</script>
<style lang="scss" scope>
.switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}
/*打开时文字位置设置*/
.switch .el-switch__label--right {
  z-index: 1;
}
/* 调整打开时文字的显示位子 */
.switch .el-switch__label--right span {
  margin-right: 9px;
}
/*关闭时文字位置设置*/
.switch .el-switch__label--left {
  z-index: 1;
}
/* 调整关闭时文字的显示位子 */
.switch .el-switch__label--left span {
  margin-left: 9px;
}
/*显示文字*/
.switch .el-switch__label.is-active {
  display: block;
}
/* 调整按钮的宽度 */
.switch.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 70px !important;
  margin: 0;
}
</style>
